/* enum */
import { BaseSelectUserComponentNameEnum } from '@src/component/common/BaseSelectUser/model'
/* model */
import { BaseSelectUserTab } from '@src/component/common/BaseSelectUser/model'
/* hooks */
import { useBaseSelectUserStoreCurrentTabType } from '@src/component/common/BaseSelectUser/store'
/* scss */
import '@src/component/common/BaseSelectUser/components/OperateBar/tabs.scss'
/* vue */
// @ts-ignore
import { ComponentInstance, ComponentRenderProxy, computed, defineComponent, PropType } from 'vue'
import { CommonComponentInstance } from '@model/VC'
import { CreateElement } from 'vue'
/* util */
import { isDepartmentTab, isNotFirstTab, isRoleTab, isServiceProviderTab } from '@src/component/common/BaseSelectUser/util'

export type OperateBarTabsProps = {
  isMulti: boolean;
  tabs: BaseSelectUserTab[];
}

export interface OperateBarTabsSetupState {
  
}

export enum OperateBarTabsEmitEventNameEnum {
  Input = 'input',
}

export type OperateBarTabsInstance = ComponentInstance & OperateBarTabsSetupState
export type OperateBarTabsVM = ComponentRenderProxy<OperateBarTabsProps> & CommonComponentInstance & OperateBarTabsInstance

export default defineComponent({
  name: BaseSelectUserComponentNameEnum.BaseSelectUserOperateBarTabs,
  emits: [
    OperateBarTabsEmitEventNameEnum.Input
  ],
  props: {
    /* 是否为多选状态 */
    isMulti: {
      type: Boolean as PropType<boolean>,
      default: false
    },
    /* Tabs 标签页数据 */
    tabs: {
      type: Array as PropType<BaseSelectUserTab[]>,
      default: () => [],
      required: true
    },
    /* 当前 tab 选中的值 */
    value: {
      type: String as PropType<String>,
      default: '',
      required: true
    }
  },
  setup(props: OperateBarTabsProps, { emit }) {
    
    const { currentTabType, setCurrentTabType } = useBaseSelectUserStoreCurrentTabType()
    
    // 是否含有 部门 选项卡
    const isHaveDepartmentTab = computed(() => {
      return props.tabs.some(tab => isDepartmentTab(tab))
    })
    
    // 是否含有 角色 选项卡
    const isHaveRoleTab = computed(() => {
      return props.tabs.some(tab => isRoleTab(tab))
    })
    
    // 是否含有 服务商 选项卡
    const isHaveServiceProviderTab = computed(() => {
      return props.tabs.some(tab => isServiceProviderTab(tab))
    })
    
    return {
      isHaveDepartmentTab,
      isHaveRoleTab,
      isHaveServiceProviderTab,
      currentTabType,
      setCurrentTabType
    }
    
  },
  render(h: CreateElement) {
    return (
      <div class={BaseSelectUserComponentNameEnum.BaseSelectUserOperateBarTabs}>
        <el-tabs value={this.currentTabType} onInput={this.setCurrentTabType}>
          
          {this.tabs.map((tab, index) => {
            return (
              <el-tab-pane
                key={tab.name}
                label={tab.label} 
                name={tab.name}
                /* 延迟加载除了第一个 tab */
                lazy={isNotFirstTab(this.tabs, index)}
              >
                { 
                  h(tab.component, { props: { isMulti: this.isMulti } })
                }
              </el-tab-pane>
            )
          })}
          
        </el-tabs>
      </div>
    )
  }
})
